<template>
  <view>
    <view
      v-show="show"
      :style="{ top: offsetTop + 'px' }"
      class="uni-mask"
      @click="hide"
      @touchmove.stop.prevent="moveHandle"/>
    <view
      v-show="show"
      :class="'uni-popup-' + position + ' ' + 'uni-popup-' + mode"
      class="uni-popup">
      {{ msg }}
      <slot/>
      <view
        v-if="position === 'middle' && mode === 'insert'"
        :class="{
          'uni-close-bottom': buttonMode === 'bottom',
          'uni-close-right': buttonMode === 'right'
        }"
        class=" uni-icon uni-icon-close"
        @click="closeMask"/>
    </view>
  </view>
</template>

<script>
export default {
	name: 'UniPopup',
	props: {
		/**
			 * 页面显示
			 */
		show: {
			type: Boolean,
			default: false
		},
		/**
			 * 对齐方式
			 */
		position: {
			type: String,
			// top - 顶部， middle - 居中, bottom - 底部
			default: 'middle'
		},
		/**
			 * 显示模式
			 */
		mode: {
			type: String,
			default: 'insert'
		},
		/**
			 * 额外信息
			 */
		msg: {
			type: String,
			default: ''
		},
		/**
			 * h5遮罩是否到顶
			 */
		h5Top: {
			type: Boolean,
			default: false
		},
		buttonMode: {
			type: String,
			default: 'bottom'
		}
	},
	data() {
		return {
			offsetTop: 0
		}
	},
	watch: {
		h5Top(newVal) {
			if (newVal) {
				this.offsetTop = 44
			} else {
				this.offsetTop = 0
			}
		}
	},
	created() {
		let offsetTop = 0
		// #ifdef H5
		if (!this.h5Top) {
			offsetTop = 44
		} else {
			offsetTop = 0
		}
		// #endif
		this.offsetTop = offsetTop
	},
	methods: {
		hide() {
			if (this.mode === 'insert' && this.position === 'middle') return
			this.$emit('hidePopup')
		},
		closeMask() {
			if (this.mode === 'insert') {
				this.$emit('hidePopup')
			}
		},
		moveHandle() {}
	}
}
</script>
<style>
	.uni-mask {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.uni-popup {
		position: fixed;
		z-index: 999;
		background-color: #ffffff;
	}

	.uni-popup-middle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.uni-popup-middle.uni-popup-insert {
		min-width: 380upx;
		min-height: 380upx;
		max-width: 100%;
		max-height: 80%;
		transform: translate(-50%, -65%);
		background: none;
		box-shadow: none;
	}

	.uni-popup-middle.uni-popup-fixed {
		border-radius: 10upx;
		padding: 30upx;
	}

	.uni-close-bottom,
	.uni-close-right {
		position: absolute;
		bottom: -180upx;
		text-align: center;
		border-radius: 50%;
		color: #f5f5f5;
		font-size: 60upx;
		font-weight: bold;
		opacity: 0.8;
		z-index: -1;
	}
	.uni-close-bottom {
		margin: auto;
		left: 0;
		right: 0;
	}
	.uni-close-right {
		right: -60upx;
		top: -80upx;
	}

	.uni-close-bottom:after {
		content: '';
		position: absolute;
		width: 0px;
		border: 1px #f5f5f5 solid;
		top: -200upx;
		bottom: 56upx;
		left: 50%;
		transform: translate(-50%, -0%);
		opacity: 0.8;
	}

	.uni-popup-top {
		top: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}

	.uni-popup-bottom {
		left: 0;
		bottom: 0;
		width: 100%;
		min-height: 100upx;
		line-height: 100upx;
		text-align: center;
	}
</style>
